
# <p style="text-align: center;"> Di Yoong </p>

## <p style="text-align: center;"> Staff </p>

![Di Yoong](/images/authors/di-yoong.jpg)

Di is currently a PhD candidate in Critical Social/Personality Psychology at CUNY, The Graduate Center (GC). They are also a GC Digital Initiatives Digital Fellow. Broadly, their work is on understanding the relationality between systems of oppression and the individual. They are interested in identities as discourses, and the ties between transnationalism and diasporas. Currently, they are working on several projects that is exploring identities as discourses, including in alt-right spaces, K-pop/Hallyu, and the experiences of queer and trans Asian (American) in the US.

As a GC Digital Initiatives Digital Fellow, they are also interested in understanding what ethics is within computational social science, digital humanities, and public humanities projects. They are also invested in bridging the gaps of technology literacy, especially within underserved communities.

## Current Author

- [Data Ethics](https://zweibel.net/DHRI-static/workshops/data-ethics/)

## Past Reviewer

- [Introduction to the Command Line](https://zweibel.net/DHRI-static/workshops/command-line/)
- [Introduction to HTML and CSS](https://zweibel.net/DHRI-static/workshops/html-css/)

Di Yoong


# <p style="text-align: center;"> Filipa Calado </p>

## <p style="text-align: center;"> Staff </p>

![Filipa Calado](/images/authors/filipa-calado.jpg)

Filipa Calado is a Ph.D. candidate in English at the Graduate Center, CUNY. She is interested in digital tools that change the way we read and study 20th century queer literatures. Her dissertation takes a critical look at a variety of digital tools to analyze manuscripts, diaries, journals, and memoirs by queer writers. Here, she explores how digital methods can disrupt expectations about reading and analytical practices. She is a Digital Fellow for the GC Digital Initiatives, where she leads workshops on Python and Text Encoding with TEI, and works with the Digital Archive Research Collective. She teaches Latinx Literature at Hunter College, CUNY.

## Current Author

- [Introduction to Python](https://zweibel.net/DHRI-static/workshops/newthon/)

## Past Reviewer

- [Text Analysis](https://zweibel.net/DHRI-static/workshops/text-analysis/)
- [Data Ethics](https://zweibel.net/DHRI-static/workshops/data-ethics/)

You can discover more of Filipa's work [at her GitHub page](https://github.com/gofilipa).

Filipa Calado


# <p style="text-align: center;"> Jojo Karlin </p>

![Jojo Karlin](/images/authors/jojo-karlin.jpg)

Jojo Karlin holds a PhD in English and is a member of the CUNY GC Manifold Scholarship team. You can discover more of Jojo's work [at her GitHub page](https://github.com/jojokarlin).

## Contributing Author

- [Introduction to the Command Line](https://zweibel.net/DHRI-static/workshops/command-line/)

Jojo Karlin


# Kalle Westerling

![Kalle Westerling](/images/authors/kalle-westerling.png)

## Former Project Coordinator, DHRI

Kalle Westerling is a Ph.D. Candidate in Theatre and Performance at The Graduate Center, CUNY, where he works on The Roots and Routes of Boylesque a dissertation about the history and aesthetics of male-identified bodies in 20th-century burlesque and 21st-century boylesque. He is also the project manager for the NEH-funded project “Expanding Communities of Practice,” aimed at helping to create infrastructure for digital humanities across several higher education institutions across the U.S.

## Current Editor

- [Introduction to Python](/workshops/python.md)
- [Text Analysis](/workshops/text-analysis.md)
- [Data Ethics](/workshops/data-ethics.md)
- [Introduction to HTML and CSS](/workshops/html-css.md)
- [Introduction to the Command Line](/workshops/command-line.md)
- [Introduction to Git and GitHub](/workshops/git.md)

## Past Editor

- [Introduction to Mapping](/workshops/mapping.md)

Kalle Westerling


# <p style="text-align: center;"> Kelsey Chatlosh </p>

![Kelsey Chatlosh](/images/authors/kelsey-chatlosh.jpg)

Kelsey Chatlosh is a Cultural Anthropology PhD candidate & Digital Fellow alumna @ The Graduate Center, CUNY. You can find more of her work at [her GitHub page.](https://github.com/kchatlosh)

## Contributing Author

- [Introduction to the Command Line](https://zweibel.net/DHRI-static/workshops/command-line/)



Kelsey Chatlosh


# <p style="text-align: center;"> Lisa Rhody </p>

## <p style="text-align: center;"> Staff </p>

![Lisa Rhody](/images/authors/lisa-rhody.jpg)

As Director of Digital Fellowship Programs, she leads 3 cohorts of graduate students: the GC Digital Fellows, Program Social Media Fellows, and Videography Fellows who work to extend and improve the critical use of digital technologies in research and teaching. Lisa is on the faculties of the M.A. in Liberal Studies, M.A. in Digital Humanities, and M.S. in Data Analytics and Visualization programs, and serves as Director of Research Projects for the CUNY Academic Commons, an academic social network designed to support faculty initiatives and build community through the use of technology in teaching and learning. Previously, she was Associate Director of Research Projects at the Roy Rosenzweig Center for History and New Media. Lisa holds a Ph.D in English from the University of Maryland, College Park. Her research, which uses computational methods such as text mining and machine learning to explore 21st century poetry, has appeared in the Journal of Digital Humanities, Debates in the Digital Humanities 2016, and PMLA.

## Current Editor

- [Introduction to Python](/workshops/python.md)
- [Text Analysis](/workshops/text-analysis.md)
- [Data Ethics](/workshops/data-ethics.md)
- [Introduction to HTML and CSS](/workshops/html-css.md)
- [Introduction to the Command Line](/workshops/command-line.md)
- [Introduction to Git and GitHub](/workshops/git.md)

## Past Editor

- [Introduction to Mapping](/workshops/mapping.md)

Lisa Rhody


# <p style="text-align: center;"> Param Ajmera </p>

## <p style="text-align: center;"> Staff </p>

![Param Ajmera](/images/authors/param-ajmera.jpg)

Param Ajmera is an English PhD candidate and Digital Fellow at the CUNY Graduate Center. He received his BA in English Literature and Economics from Denison University, and his MA in English as well as a Graduate Certificate in Digital Humanities from Northeastern University. His research interests include Race and Ethnicity Studies, American Studies, and Digital Humanities. Param’s dissertation project is an archival study of the early history of Indian international students in the United States. His research theorizes the experiences of these students to discuss ways of building transnational solidarities against colonialism, racism, and patriarchy. Alongside his dissertation, Param is also developing a website titled Indian Students Abroad that exhibits his archival findings. Param has previously worked on the Women Writers Project, the CERES Exhibit Toolkit, and the Graduate Center Digital Research Institute. He currently serves on the Editorial Collective of The Journal of Interactive Technology and Pedagogy.

## Current Author

- [Intro to HTML and CSS](/workshops/html-css.md)

## Past Reviewer

- [Introduction to Python](/workshops/python.md)
- [Introduction to Git and GitHub](/workshops/git.md)

Param Ajmera


# <p style="text-align: center;"> Patrick Smyth </p>

![Patrick Smyth](/images/authors/patrick-smyth.jpg)

Patrick Smyth is a Ph.D. student in English and MA Advising Fellow at The Graduate Center, CUNY. He is a developer for DH Box, an NEH-funded project to make the digital humanities more widely accessible, and recently led curriculum design for the Digital Research Institute, a week-long intensive course in digital methods at the Graduate Center. Patrick works at the intersection of the digital humanities, disability studies, and the public humanities. Two of his recent projects include the NEH Impact Index and Eloud, a screen reader written in the Lisp programming language. His thesis project is Negotiated Access, an argument on the need for citizen technology to express and preserve community values. Patrick is a former Fulbright Fellow, and has taught at Queens College.

You can discover more of Patrick's work [at his GitHub page](https://github.com/smythp).

Patrick Smyth


# <p style="text-align: center;"> Rafael Davis Portela </p>

## <p style="text-align: center;"> Staff </p>

![Rafael Davis Portela](/images/authors/rafa-davis-portela.jpg)

I am a Ph.D. student in the History department, specializing in the History of Capitalism and history of Latin America. I research the role of transnational capital in Latin American urban development. As a Digital Fellow on the Graduate Center Digital Initiatives, I support member of the GC community to find the right computing tools for their research. I lead the Python Users’ Group, and write and lead workshops on Python, Markdown, Network Analysis, among others. I am interested in programming, video games, digital tools, teaching research computing, Emacs, running, board games, among other things.

## Current Author

- [Text Analysis](/workshops/text-analysis.md)

## Past Reviewer

- [Introduction to Python](/workshops/python.md)
- [Introduction to Git and GitHub](/workshops/git.md)

Rafael Davis Portela


# <p style="text-align: center;"> Stefano Morello </p>

## <p style="text-align: center;"> Staff </p>

![Stefano Morello](/images/authors/stefano-morello.jpg)

Stefano Morello is a doctoral candidate in English with a certificate in American Studies at The Graduate Center, CUNY. His academic interests include American Studies, pop culture, poetics, and digital humanities. His dissertation, “Let’s Make a Scene! East Bay Punk and Subcultural Worlding,” explores the heterotopic space of the East Bay punk scene, its modes of resistance and (dis-)association, and the clashes between its politics and aesthetics. He serves as co-chair of the Graduate Forum of the Italian Association for American Studies (AISNA) and is a founding editor of its journal, JAm It! (Journal of American Studies in Italy). As a digital humanist, Stefano focuses on archival practices with a knack for archival pedagogy and public-facing initiatives. He created the East Bay Punk Digital Archive, an open access archive of East Bay punk-zines, and worked as a curator and consultant for Lawrence Livermore’s archive at Cornell University. He was a Wellcome Trust Transdisciplinary Fellow in 2019-2020.

## Current Author

- [Introduction to the Command Line](/workshops/command-line.md)

## Past Reviewer

- [Data Ethics](/workshops/data-ethics.md)
- [Introduction to HTML and CSS](/workshops/html-css.md)

Stefano Morello


# Stephen Zweibel

## Staff

![Steve Zweibel](/images/authors/steve-zweibel.jpg)

Stephen Zweibel supports digital project creation by GC researchers across the disciplines, helps preserve those projects, and supports faculty and students with their data-based research and data management needs. He also coordinates the library’s growing series of workshops on research skills and tools. Steve earned his master’s degree in library and information science from Long Island University in 2010, and received a master’s degree in the Digital Humanities track of the GC’s MALS program. As a MALS student, he built DH Box, a cloud-based computer lab for digital humanities research (including the tools Omeka, NLTK, IPython, R Studio, and Mallet). DH Box won a National Endowment for the Humanities Start-Up grant. Before coming to the Graduate Center, Steve was a visiting lecturer at Hunter College, where he built several useful library tools, including Augur, a web application to track reference question data; a mobile app for the CUNY library catalog; and Know Thy Shelf, a radio frequency identification (RFID)-based library inventory system.

Other projects include [DH Box](https://dhbox.org/). You can find more of his work on [his GitHub page](https://github.com/szweibel). 

## Past Author

- [Introduction to Git and GitHub](https://zweibel.net/DHRI-static/workshops/git/)
- [Data Ethics](https://zweibel.net/DHRI-static/workshops/data-ethics/)


Stephen Zweibel

<!doctype HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="10_styles.css">
    <title>My JavaScripting Master's Student Project</title>
  </head>
  <body>
    <div class="formatText">
      <h2><a href="poem.html">Walt Whitman's <em>Broadway</em></a></h2>
      <h1 id="noShow">This is my project!</h1>
      <h1>Bad Jokes Galore!</h1>
      <button id="toggleJokes">Toggle Jokes</button>
        <section id="joke">     
          <p>Q: Why did the programmer quit his job?
          A: Because he didn't get arrays.</p>
          <p>Q: What's the difference between an academic and a genie?
          A: One grants wishes, the other wishes for grants.</p>
        </section>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="10_script.js"></script>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Walt Whitman's Broadway</title>
    <link rel="stylesheet" href="10_poem.css">
  </head>
  <body>
    <div class="container">
      <h1><em>Broadway</em> by Walt Whitman</h1>
      <div id="intro">
        <p>Welcome to the page for Walt Whitman's poem <em>Broadway</em>. Click on elements to see more information about them.</p>
      </div>
      <div id="poem">
      </div>
      <div id="info">
      </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="10_poem.js"></script>
  </body>
</html>

//Part 1 - Define the extra information section for the poem
$("#info").html("<p>Extra info will go here.</p>");

// Part 2 - Display the poem and allow for clicking on words
$.getJSON("poem.json", function(data){ // data variable is the JSON object
  let poemText; // Define a new variable to hold all text
  poemText = "<blockquote><p>"; // Open the starting tags
  // Now you can iterate (map) over the data variable’s .lines property:
  data.lines.map(function(line){ // We get a variable, line
    // Define a blank lineText.
    let lineText = "";
    // Now iterate over each line. This part should be familiar to you from before
    line.map(function(word){
      let wordString;
      wordString = word.text;
      if (word.info){
        wordString = "<a href='#' data-info='" + word.info + "'>" + wordString + "</a>";
      }
      lineText = lineText + wordString + " "; // Add the word to the lineText variable with spacing
    });
    // Add lineText with a line break to the poemText
    poemText = poemText + lineText + "<br/>";
  });
  // Close the poemText tags
  poemText = poemText + "</p></blockquote>";
  // Replace the content of #poem
  $("#poem").html(poemText);
  // Now that we have the data, we can add the click event to the poem
  $("#poem a").click(function(){
    let infoText, clickedWord, clickedInfo;
    clickedWord = $( this ).text();
    // .data("info") looks for the data-info HTML attribute
    clickedInfo = $( this ).data("info");
    infoText = clickedInfo;
    $("#info").html(infoText);
  });
}); // Close the getJSON method and callback function

$("#noShow").hide();

$("h1").html("The Best Jokes Ever!");

$("#joke").append("<p>Q. What do you call a fake noodle? <br /> A. An impasta</p>");

$("#toggleJokes").css({
    "background-color": "orange",
    "color": "white",
    "font-size": "20px",
    "padding": "10px",
    "border-radius": "5px",
    "border": "2px solid black",
    "margin": "10px"
});

$("#toggleJokes").click(function() {
    $("#joke").toggle();
  });

body {
    background-color: rgb(118, 92, 120);
}

h1 {
    font-size: 50px;
    font-weight: bold;
}

p {
    font-size: 30px;
}

.formatText {
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    white-space: pre-line;
}

#joke {
    border: 5px solid rgb(16, 29, 55);
    background-color: rgb(118, 125, 158);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin: 0 auto;
    color: rgb(255, 230, 204);
}

<!doctype HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="11_styles.css">
    <title>My JavaScripting Master's Student Project</title>
  </head>
  <body>
    <div class="formatText">
      <h2><a href="poem.html">Walt Whitman's <em>Broadway</em></a></h2>
      <h1 id="noShow">This is my project!</h1>
      <h1>Bad Jokes Galore!</h1>
      <button id="toggleJokes">Toggle Jokes</button>
        <section id="joke">     
          <p>Q: Why did the programmer quit his job?
          A: Because he didn't get arrays.</p>
          <p>Q: What's the difference between an academic and a genie?
          A: One grants wishes, the other wishes for grants.</p>
        </section>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="11_script.js"></script>
  </body>
</html>

let poemMap;
poemMap = L.map("map");

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(poemMap);

poemMap.setView([40.7128, -74.0060], 16);

const timesSquare = L.marker([40.7580, -73.9855]).addTo(poemMap);

timesSquare.bindPopup("<b>Times Square</b>");

const circle = L.circle([40.7580, -73.9855], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(poemMap);

const polyline = L.polyline([
    [40.7580, -73.9855],
    [40.7486, -73.9840]
], {
    color: 'blue'
}).addTo(poemMap);

polyline.bindPopup("<b>Times Square to the Graduate Center</b>");

circle.bindPopup("I'm a circle!");

const latLng = timesSquare.getLatLng();
console.log(latLng.lat);
console.log(latLng.lng);

poemMap.panTo(timesSquare.getLatLng());

poemMap.on('click', function(e) {
    const latLng = e.latlng;
    console.log(latLng.lat);
    console.log(latLng.lng);
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Walt Whitman's Broadway</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
    integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
    integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
    crossorigin=""></script>
    <link rel="stylesheet" href="11_poem.css">
  </head>
  <body>
    <div class="container">
      <h1><em>Broadway</em> by Walt Whitman</h1>
      <div id="intro">
        <p>Welcome to the page for Walt Whitman's poem <em>Broadway</em>. Hover over elements to see more information about them.</p>
      </div>
      <div id="poem"> </div>
      <div id="info"></div>
      <h2>Map of New York</h2>
      <div id="map"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="11_map.js"></script>
    <script src="11_poem.js"></script>
  </body>
</html>

<!doctype HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="12_styles.css">
    <title>My JavaScripting Master's Student Project</title>
  </head>
  <body>
    <div class="formatText">
      <h2><a href="poem.html">Walt Whitman's <em>Broadway</em></a></h2>
      <h2><a href="12_nyc-data.html">NYC Neighborhoods</a></h2>
      <h1 id="noShow">This is my project!</h1>
      <h1>Bad Jokes Galore!</h1>
      <button id="toggleJokes">Toggle Jokes</button>
        <section id="joke">     
          <p>Q: Why did the programmer quit his job?
          A: Because he didn't get arrays.</p>
          <p>Q: What's the difference between an academic and a genie?
          A: One grants wishes, the other wishes for grants.</p>
        </section>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="12_script.js"></script>
  </body>
</html>

#map { 
    height: 600px; 
    width: 75%;
}

#neighborhoods {
    columns: 100px 3
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>NYC Neighborhoods</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
    integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
    crossorigin=""/>
    <link rel="stylesheet" href="12_nyc-data.css">
   <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
   integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
   crossorigin=""></script>
   <script src="nycneighborhoods.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>NYC Neighborhoods</h1>
      <a href = "https://data.beta.nyc/dataset/pediacities-nyc-neighborhoods/resource/35dd04fb-81b3-479b-a074-a27a37888ce7" alt="Data Source">Here's the source for NYC neighborhood boundaries.</a>
      <div id="map"></div>
      <button id="pan-to-flatbush">Pan to Flatbush</button>
      <div id ="neighborhoods"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="12_nyc-data.js"></script>
  </body>
</html>

let nycMap;
nycMap = L.map("map");

// create tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(nycMap);

nycMap.setView([40.7128, -74.0060], 16);

L.geoJSON(nyc).addTo(nycMap);

// add some fill color to the map
L.geoJSON(nyc, {
    style: function(feature) {
        return {
            color: "blue",
            fillColor: "yellow",
            fillOpacity: 0.5
        };
    }
}).addTo(nycMap);

// show each borough on the map
L.geoJSON(nyc, {
    onEachFeature: function(feature, layer) {
        layer.bindPopup("<h3>" + feature.properties.borough + "</h3> <hr> <h3>" + feature.properties.neighborhood + "</h3>");
    }
}).addTo(nycMap);

$("#pan-to-flatbush").click(function() {
    // find flatbush neighborhood property in the dataset
    let flatbush = nyc.features.find(function(feature) {
        return feature.properties.neighborhood === "Flatbush";
    });
    console.log(flatbush);
    // find the coordinates of flatbush property
    let coordinates = nyc.features.find(function(feature) {
        return feature.properties.neighborhood === "Flatbush";
    }).geometry.coordinates;
    console.log(coordinates);
    nycMap.panTo(new L.LatLng(coordinates[0][0][1], coordinates[0][0][0]));
});

// get a list of all the neighborhoods in the dataset
let neighborhoods = nyc.features.map(function(feature) {
    return feature.properties.neighborhood;
}).filter(function(neighborhood) {
    return neighborhood !== "";
}).sort();
console.log(neighborhoods);

// display all the neighborhoods in the neighborhoods div
neighborhoods.forEach(function(neighborhood) {
    $("#neighborhoods").append("<a href ='#'><li>" + neighborhood + "</li></a>");
    // display in columns
    if (neighborhoods.indexOf(neighborhood) % 4 === 0) {
        $("#neighborhoods").append("<br>");
    }
});

// if the neighborhood is clicked, find the neighborhood on the map and pan to it
$("#neighborhoods").on("click", "li", function() {
    let neighborhoodText = $(this).text(); // get the text of the neighborhood
    let coordinates = nyc.features.find(function(feature) {
        return feature.properties.neighborhood === neighborhoodText; //check if the text matches the neighborhood in the dataset
    }).geometry.coordinates; // get the coordinates of the neighborhood
    nycMap.panTo(new L.LatLng(coordinates[0][0][1], coordinates[0][0][0]));
    // zoom in
    nycMap.setZoom(16);
    // add a marker to the neighborhood polygon
    L.marker(new L.LatLng(coordinates[0][0][1], coordinates[0][0][0])).addTo(nycMap);
    // add a popup to the marker
    L.marker(new L.LatLng(coordinates[0][0][1], coordinates[0][0][0])).bindPopup("<h3>" + neighborhoodText + "</h3>").addTo(nycMap);
});

<!doctype HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="8_styles.css">
    <title>My JavaScripting Master's Student Project</title>
  </head>
  <body>
    <div class="formatText">
      <h1>This is my project!</h1>
        <section id="joke">     
          <p>Q: Why did the programmer quit his job?
          A: Because he didn't get arrays.</p>
          <p>Q: What's the difference between an academic and a genie?
          A: One grants wishes, the other wishes for grants.</p>
        </section>
    </div>
    <script src="8_script.js"></script>
  </body>
</html>

// alert('My project is going to be awesome!');

<!doctype HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="9_styles.css">
    <title>My JavaScripting Master's Student Project</title>
  </head>
  <body>
    <div class="formatText">
      <h1 id="noShow">This is my project!</h1>
      <h1>Bad Jokes Galore!</h1>
      <button id="toggleJokes">Toggle Jokes</button>
        <section id="joke">     
          <p>Q: Why did the programmer quit his job?
          A: Because he didn't get arrays.</p>
          <p>Q: What's the difference between an academic and a genie?
          A: One grants wishes, the other wishes for grants.</p>
        </section>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="9_script.js"></script>
  </body>
</html>

<!doctype HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My JavaScripting Master's Student Project</title>
  </head>
  <body>
    <h1>This is my project!</h1>
    <script src="script.js"></script>
  </body>
</html>

This is a basic introduction to JavaScript, which is the programming language of the web. The class is designed for anyone interested in developing a website, or creating an interactive data visualization. By the end of this course, you will be able to read JavaScript you find online and adapt it to your needs. You will also have an opportunity to work with common JavaScript libraries/tools and enhance your own research practices.

Intro to Javascript

REPL

Code Editor